<template>
    <h2>管理员控制台</h2>
    <el-select v-model="selectedRole" placeholder="选择角色">
        <el-option label="学生" value="student"></el-option>
        <el-option label="教师" value="teacher"></el-option>
    </el-select>
    <el-table :data="filteredUsers" style="width: 100%">
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="danger" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useMemberStore } from '../stores/member'
import { ElMessage } from 'element-plus'

const selectedRole = ref('student')
const memberStore = useMemberStore()

const filteredUsers = computed(() => {
    return memberStore.users.filter((user) => user.role === selectedRole.value)
})

const deleteUser = (id) => {
    memberStore.deleteUser(id)
    ElMessage.success('用户已删除')
}
</script>